<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜水果</title>
    <style>
        .box {
            width: 700px;
            margin: 0 auto;
        }

        .left {
            width: 200px;
            float: left;
            margin-top: 20px;
        }

        .right {
            width: 470px;
            height: 722px;
            background-image: url(./images/看图识字.png);
            float: right;
            position: relative;
        }

        ul {
            height: 618px;
            width: 420px;
            list-style: none;
            padding: 0;
            margin: 0;
            position: absolute;
            top: 82px;
            left: 20px;
        }

        li {
            float: left;
            height: 79px;
            width: 100px;
            margin-top: 75px;
            margin-left: 5px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left">
            <img src="./images/1.png" alt="">
            <img src="./images/2.png" alt="">
            <img src="./images/3.png" alt="">
            <img src="./images/4.png" alt="">
            <img src="./images/5.png" alt="">
            <img src="./images/6.png" alt="">
            <img src="./images/7.png" alt="">
            <img src="./images/8.png" alt="">
            <img src="./images/9.png" alt="">
            <img src="./images/10.png" alt="">
            <img src="./images/11.png" alt="">
            <img src="./images/12.png" alt="">
            <img src="./images/13.png" alt="">
            <img src="./images/14.png" alt="">
            <img src="./images/15.png" alt="">
            <img src="./images/16.png" alt="">
        </div>
        <div class="right">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    <script>
        // 获取标签
        var imgs = document.querySelectorAll(".left img")
        console.log(imgs)
        var lis = document.querySelectorAll("ul li")
        console.log(lis);
        var indexs = 0;
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].index = i;
            imgs[i].ondrag = function () {
                console.log("正在拖拽" + this.index)
                indexs = this.index;
                console.log(indexs)
            }
            console.log('外部的indexs'+indexs)
        }
       
        //绑定拖拽区域li
        for (var j = 0; j < lis.length; j++) {
            lis[j].count = j;
            lis[j].ondragover = function (e) {
                console.log("有什么东西正在这个标签中拖动")
                e.preventDefault();
                console.log('外部的indexs'+indexs)
            }
            lis[j].ondrop = function (e) {
                e.preventDefault();
                if (this.count == indexs) {
                    lis[this.count].appendChild(imgs[indexs]);
                }

            }
        }
    </script>
</body>

</html>